import {CustomBytemdPlugin} from "/@/types/bytemd";

const icons = {
    Formula:
        '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m40 9-3-3H8l18 18L8 42h29l3-3"/></svg>',
    Inline:
        '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m37 9-3-3H8l17 18L8 42h26l3-3M5 24h10M33 24h10"/></svg>',
    Block:
        '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 48 48"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m36 11-3-3H12l16 16-16 16h21l3-3M6 5v38M42 5v38"/></svg>',
}
/**
 * 解析数学公式
 */
export default function mathPlugin(katexOptions?: any): CustomBytemdPlugin {
    let katex: any
    return {
        async process(element) {
            const renderMath = async (selector: string) => {
                const els = element.querySelectorAll<HTMLElement>(selector)
                if (els.length === 0) return
                if (!katex) {
                    katex = await import('katex').then((m) => m.default)
                }
                els.forEach((el) => {
                    katex.render(el.innerText, el, {
                        ...katexOptions,
                        throwOnError: false,
                        output: "mathml",
                    })
                })
            }
            await renderMath('.katex')
        },
        actions: [
            {
                icon: icons.Formula,
                handler: {
                    type: 'dropdown',
                    actions: [
                        {
                            title: "行内公式",
                            icon: icons.Inline,
                            cheatsheet: '$`公式`$',
                            handler: {
                                type: 'action',
                                click({wrapText, editor}) {
                                    wrapText('$`', '`$')
                                    editor.focus()
                                },
                            },
                        },
                        {
                            title: "块级公式",
                            icon: icons.Block,
                            cheatsheet: '```math↵公式↵```',
                            handler: {
                                type: 'action',
                                click({appendBlock, editor, codemirror}) {
                                    const {line} = appendBlock('```math\n\\TeX\n```')
                                    editor.setSelection(
                                        codemirror.Pos(line + 1, 0),
                                        codemirror.Pos(line + 1, 4)
                                    )
                                    editor.focus()
                                },
                            },
                        },
                    ],
                },
            },
        ]
    };
}